<template>
    <div class="bigBox">
        <van-loading color="red"  v-if="loading" class="pos"/>
        <div class="box" ref="box" v-else>
            <div class="mytop">
                <div @click="back">&lt; 返回</div>
                <div>星座详情</div>
                <div></div>
            </div>

            <div class="main">

                <h3>星座运势</h3>
                <h4>{{name1}}</h4>
                <div>{{career}}</div>
                <h4>财富运势</h4>
                <div>{{finance}}</div>
                <h4>健康运势</h4>
                <div>{{health}}</div>
                <h4>桃花运</h4>
                <div>{{love}}</div>
                <h4>幸运石</h4>
                <div>{{luckeyStone}}</div>



            </div>




        </div>
    </div>
</template>

<script>
    import {constellation} from "../api/api";

    export default {
        name: "theZodiac",
        data(){
            return{
                Nineandthreequarters:'',
                career:'',
                finance:'',
                health:'',
                love:'',
                luckeyStone:'',
                name1:'',
                loading:false
            }
        },
        methods:{
            back(){
                this.$router.push({path:'/myapp/hot'})
            },
        },
        created() {
            this.Nineandthreequarters =this.$router.history.current.query.consName
            console.log(this.Nineandthreequarters)
            console.log(this.$router.history.current.query.consName)
            constellation(this.Nineandthreequarters).then(res=>{
                console.log(res)
                this.career=res.career[0]
                this.finance = res.finance[0]
                this.health = res.health[0]
                this.love = res.love[0]
                this.luckeyStone = res.luckeyStone
                this.name1 = res.name
                // this.loading=false;

            })
        }

    }


</script>

<style scoped>
    .pos{
        position: absolute;
        top:46%;
        left:46%;
    }
    .mytop{
        display:flex;
        text-align: center;
        height:50px;
        line-height:50px;
        background-color: rgb(204, 0, 0);
        color:white;
    }
    .mytop>div:nth-child(1){
        width:60px;
    }
    .mytop>div:nth-child(2){
        width:calc(100% - 120px);
        font-size: 18px;
    }
    .mytop>div:nth-child(3){
        width:60px;
    }










    /*大标题*/
    .bigBox>h3{
        padding-top:10px ;
        padding-bottom:10px;
        text-align: center;
    }
/*    小标题*/
    .bigBox>h4{
        text-align: center;
    }
    /*主题内容*/
    .bigBox>div{
        font-size:15px;

    }
.bigBox {
    box-sizing:border-box;
    background-image: url(../assets/hali.gif);
    background-size: 100%   ;
    color: white;
}
    .main{
        padding:5px;
    }
</style>